<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/geming/jquery-ui-1.8.18.custom.css"
	rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
	$(function() {
		// Accordion
		$("#accordion").accordion({ header: "h3" });

		// Tabs
		$('#tabs').tabs();


		// Dialog			
		$('#dialog').dialog({
			autoOpen: false,
			width: 600,
			buttons: {
				"Ok": function() { 
					$(this).dialog("close"); 
				}, 
				"Cancel": function() { 
					$(this).dialog("close"); 
				} 
			}
		});
		
		// Dialog Link
		$('#dialog_link').click(function(){
			$('#dialog').dialog('open');
			return false;
		});

		// Datepicker
		$('#datepicker').datepicker({
			inline: true
		});
		
		// Slider
		$('#slider').slider({
			range: true,
			values: [17, 67]
		});
		
		// Progressbar
		$("#progressbar").progressbar({
			value: 20 
		});
		
		//hover states on the static widgets
		$('#dialog_link, ul#icons li').hover(
			function() { $(this).addClass('ui-state-hover'); }, 
			function() { $(this).removeClass('ui-state-hover'); }
		);
	});
</script>
</head>
<body>
	<div class="header" >
		
	</div>

	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">按钮1</a></li>
			<li><a href="#tabs-2">按钮2</a></li>
			<li><a href="#tabs-3">按钮3</a></li>
		</ul>
		<div id="tabs-1">

			<!-- Accordion -->
			<div id="accordion">
				<div>
					<h3>
						<a href="#">按钮1</a>
					</h3>
					<div>
						Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem
						ipsum dolor sit amet. 
					</div>
				</div>
				<div>
					<h3>
						<a href="#">Second</a>
					</h3>
					<div>Phasellus mattis tincidunt nibh.</div>
				</div>
				<div>
					<h3>
						<a href="#">Third</a>
					</h3>
					<div>Nam dui erat, auctor a, dignissim quis.</div>
				</div>
			</div>
			
			
			<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
		</div>
		<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci
			urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas
			scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
		<div id="tabs-3">Nam dui erat, auctor a, dignissim quis,
			sollicitudin eu, felis. Pellentesque nisi urna, interdum eget,
			sagittis et, consequat vestibulum, lacus. Mauris porttitor
			ullamcorper augue.</div>
	</div>

	<!-- ui-dialog -->
	<div id="dialog" title="Dialog Title">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
			do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
			enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
			ut aliquip ex ea commodo consequat.</p>
	</div>
</body>
</html>